<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人健康系统 - 登录</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div th:replace="~{layout/base :: nav}"></div>

    <main class="container mt-4 mb-4">
        <div class="login-container">
            <h2>健康饮食系统 - 登录</h2>
            <p class="subtitle">为您的饮食健康管理护航</p>
            
            <div th:if="${param.error}" class="alert alert-danger" role="alert">
                <p>用户名或密码不正确。</p>
            </div>
            <div th:if="${param.logout}" class="alert alert-success" role="alert">
                <p>您已成功退出。</p>
            </div>

            <form id="loginForm" action="/login" method="post">
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                    <input type="text" id="username" name="username" placeholder="请输入注册手机号/用户名" required class="form-control">
                </div>
                <div class="input-group mb-3">
                    <span class="input-group-text"><i class="fas fa-lock"></i></span>
                    <input type="password" id="password" name="password" placeholder="请输入登录密码" required minlength="6" class="form-control">
                    <span class="input-group-text toggle-password" id="togglePassword"><i class="fas fa-eye-slash"></i></span>
                    <div class="invalid-feedback d-block" id="passwordHint" style="display:none;">建议密码包含字母 + 数字</div>
                </div>
                <button type="submit" class="btn btn-primary w-100" id="loginButton">
                    安全登录
                    <span class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true" style="display:none;"></span>
                </button>
            </form>

            <div class="mt-3 text-end">
                <a href="#">忘记密码?</a>
            </div>

            <div class="mt-3">
                <span>还没有账号?</span> <a th:href="@{/register}">新用户注册</a>
            </div>
        </div>
    </main>

    <footer class="text-center py-3 bg-dark text-white">
        <p>&copy; 2025 个人健康管理系统</p>
    </footer>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom Global JS -->
    <script th:src="@{/js/global.js}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('password');
            const passwordHint = document.getElementById('passwordHint');
            const loginButton = document.getElementById('loginButton');
            const loginForm = document.getElementById('loginForm');
            const spinner = loginButton.querySelector('.spinner-border');
            const originalButtonText = '安全登录';

            // 密码显示/隐藏切换
            togglePassword.addEventListener('click', function() {
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                togglePassword.querySelector('i').className = type === 'password' ? 'fas fa-eye-slash' : 'fas fa-eye';
            });

            // 密码长度和弱密码提示
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                const hasLetter = /[a-zA-Z]/.test(password);
                const hasNumber = /[0-9]/.test(password);

                if (password.length > 0 && password.length < 6) {
                    passwordHint.textContent = '密码至少需要6位';
                    passwordHint.style.display = 'block';
                } else if (password.length >= 6 && (!hasLetter || !hasNumber)) {
                    passwordHint.textContent = '建议密码包含字母 + 数字';
                    passwordHint.style.display = 'block';
                } else {
                    passwordHint.style.display = 'none';
                }
            });

            // 登录表单提交处理
            loginForm.addEventListener('submit', function(event) {
                // 禁用按钮并显示加载动画
                loginButton.disabled = true;
                spinner.style.display = 'inline-block';
                loginButton.childNodes[0].nodeValue = ''; // 清除文本节点，仅显示spinner
            });

            // Re-enable button and hide spinner on form load if there are parameters
            const currentUrl = new URL(window.location.href);
            if (currentUrl.searchParams.has('error') || currentUrl.searchParams.has('logout') || currentUrl.searchParams.has('success')) {
                loginButton.disabled = false;
                spinner.style.display = 'none';
                loginButton.childNodes[0].nodeValue = originalButtonText;
            }
        });
    </script>
</body>
</html> 